require("../../assets/css/normalize.css");
require("../../assets/css/reset.css");
require("../../assets/fonts1/iconfont.css");
require("./mine_sports_data.less");

// 引入模块
const axios = require("../../utils/axios.js");
const dom = require("../../utils/dom.js");
import * as echarts from "echarts";

document.addEventListener("DOMContentLoaded", async function () {
	dom.get(".icon-31fanhui1").addEventListener("click", function () {
		console.log(111);
		location.href = "mine.html";
	});

	let run = 0;
	let ride = 0;
	let exercise = 0;
	//发送请求获取运动数据
	let res = await axios.get("/api/exercise");
	let { sum7Calorie, sum7Duration, sum7Meter, days } = res.data.data;

	// 总运动分钟
	dom.get("#minutes").textContent = sum7Meter;

	// 本周消耗
	dom.get("#calories").textContent = sum7Calorie;

	// 消耗千卡
	dom.get(".allData-calories").textContent = sum7Calorie;

	// 连续天数
	dom.get(".allData-day").textContent = days.length;

	let x1 = days.map((v) => v.date.slice(5));
	let y1 = days.map((v) => v.sumDuration);

	// 基于准备好的dom，初始化echarts实例
	const myChart1 = echarts.init(dom.get("#echarts1"));
	// 绘制图表
	// 柱状图
	myChart1.setOption({
		//标题
		title: {
			text: "运动时长",
			left: 15,
			top: 15,
		},
		tooltip: {},
		xAxis: {
			type: "category",
			data: x1,
		},
		yAxis: {},
		series: [
			{
				name: "销量",
				showBackground: true,
				type: "bar",
				data: y1,
				backgroundStyle: {
					color: "rgba(180,180,180,0.2)",
				},
			},
		],
		//控制整体位置
		grid: {
			left: 55,
			bottom: 40,
		},
	});

	// 跑步数据(总时长)
	days.forEach((v) => {
		return (run += v.exerciseData[0].duration);
	});

	// 跑步数据(总时长)
	days.forEach((v) => {
		return (ride += v.exerciseData[1].duration);
	});

	// 跑步数据(总时长)
	days.forEach((v) => {
		return (exercise += v.exerciseData[2].duration);
	});

	// 饼图
	// 基于准备好的dom，初始化echarts实例
	const myChart2 = echarts.init(dom.get("#echarts2"));
	// 绘制图表
	myChart2.setOption({
		title: {
			text: "运动分类",
			left: 15,
			top: 15,
		},
		tooltip: {
			trigger: "item",
		},
		// 图例
		legend: {
			orient: "vertical",
			left: "15",
			top: "45",
		},
		series: [
			{
				name: "Access From",
				type: "pie",
				radius: "70%", // 调整大小
				left: "70", // 调整饼图位置

				data: [
					{ value: run, name: "跑步" },
					{ value: ride, name: "骑行" },
					{ value: exercise, name: "训练" },
				],
				label: {
					//显示在饼图中的文字标签
					position: "inside",
					formatter: "{d}%",
					color: "#fff",
					fontSize: 14,
				},
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: "rgba(0, 0, 0, 0.5)",
					},
				},
			},
		],
	});

	// 跑步数据(总时长)
	let y2 = [];
	days.forEach((v) => {
		return y2.push(v.exerciseData[2].duration);
	});
	console.log(y2);
	// 折线图
	// 基于准备好的dom，初始化echarts实例
	const myChart3 = echarts.init(dom.get("#echarts3"));
	// 绘制图表
	myChart3.setOption({
		title: {
			text: "近七日训练次数",
			left: 15,
			top: 15,
		},
		xAxis: {
			type: "category",
			data: x1,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				data: y2,
				type: "line",
			},
		],
		//控制整体位置
		grid: {
			left: 55,
			bottom: 40,
		},
	});
});
